import { useLocation, useNavigate } from 'react-router-dom';
import style from './style.module.scss';
import Scrollbars from 'react-custom-scrollbars';

const menus = [
    {
        name: '例子1',
        path: '/demo',
    },
    {
        name: '例子2',
        path: '/demo2',
    },
    {
        name: '主页',
        path: '/home',
    },
    {
        name: '页面1',
        path: '/page1',
    },
    {
        name: '分页',
        path: '/paginationDemo',
    },
    {
        name: '虚拟滚动',
        path: '/virtualScroll',
    },
    {
        name: '面包屑',
        path: '/breadcrumbDemo',
    },
    {
        name: '评分',
        path: '/rate',
    },
];

const Menus = () => {
    const navigate = useNavigate();
    const location = useLocation();
    return (
        <div className='bg-fff' style={{ width: 230 }}>
            <Scrollbars>
                <li className='m-y-18 p-l-24 p-r-16 font-bold fz-18'>Menus</li>
                {menus.map(({ name, path }) => (
                    <li
                        className={location.pathname === path ? `${style.li} ${style.active}` : style.li}
                        key={path}
                        onClick={() => navigate(path)}
                    >
                        {name}
                    </li>
                ))}
            </Scrollbars>
        </div>
    );
};

export default Menus;
